<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <!--百度统计-->
    <script src="/blog/js/statistics.js"></script>
    <!--editor的预览css-->
    <link rel="stylesheet" href="/lib/editormd/css/editormd.preview.min.css"/>
    <!--typo 的css-->
    <!--    <link rel="stylesheet" href="/lib/typo/typo.css"/>-->
    <!--animate 的css-->
    <link rel="stylesheet" type="text/css" href="/lib/animate/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/animate/css/animate.css"/>

    <!--tocbot 的css-->
    <link rel="stylesheet" type="text/css" href="/lib/tocbot/tocbot.css">
    <!--tocbot 的js-->
    <script src="/lib/tocbot/tocbot.min.js"></script>

    <!--layUI的css-->
    <link rel="stylesheet" href="/layui/css/layui.css">

</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!--导航栏-->
    <div class="layui-header layui-bg-green">
        <div class="layui-logo  layui-bg-green"><h2 class="layui-font-cyan">Blog</h2></div>
        <ul class="layui-nav layui-layout-left layui-bg-green">
            <li class="layui-nav-item layui-this">
                <a href="index.html">
                    <button id="index_btn" hidden></button>
                    <i class="layui-icon layui-icon-home"></i>首页<span
                        class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/blog_type.html"><i class="layui-icon layui-icon-diamond"></i>分类<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/blog_tag.html"><i class="layui-icon layui-icon-note"></i>标签<span
                        class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/blog_timeline.html"><i class="layui-icon layui-icon-date"></i>时间线<span
                        class="layui-badge">9</span></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right layui-bg-green">
            <li class="layui-nav-item" name="user_li">
                <a href="#"><img src="https://picsum.photos/500" class="layui-nav-img" alt=""><span>游客</span></a>
                <dl class="layui-nav-child">
                    <dd name="not_login_to_hidden" hidden><a href="/blog/personal.html">个人中心</a></dd>
                    <dd name="not_login_to_hidden" hidden><a href="/settings/menu.html">博客管理</a></dd>
                    <dd><a href="/login.html">登录</a></dd>
                    <dd name="not_login_to_hidden" hidden><a href="#" onclick="logout()">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <!--主体内容-->
    <div id="main_content" class="showInTop a-time1 a-delay1" style="padding: 6em 5% 10em 5%; width: 90%;">
        <!--博客内容-->
        <div class="layui-card my_opacity">
            <!--标题-->
            <div class="layui-card-header">
                <h1 name="title" style="text-align: center">这是一个测试标题</h1>
            </div>
            <!--博客信息-->
            <div id="blog_info" class="layui-card-header">
                <div class="layui-row layui-col-space4">
                    <div class="layui-col-md3 layui-col-xs4">
                        <img class="layui-nav-img"
                             src="https://picsum.photos/100/100?image=140"
                             alt="" name="head_portrait_url">
                        <a href="#"><span name="username" class="layui-font-blue">一场游戏啦啦啦</span></a>
                    </div>
                    <div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>
                        <span name="publish_date">2021-08-03</span>
                    </div>
                    <div class="layui-col-md2 layui-col-xs2"><i class="layui-icon layui-icon-senior"></i>
                        <span name="view_times">12345</span>
                    </div>
                    <div class="layui-col-md2 layui-col-md-offset2 layui-col-xs2">
                        <button name="type_id" value="" class="layui-btn layui-btn-xs layui-btn-radius">spring底层原理
                        </button>
                    </div>
                    <div class="layui-col-md1 layui-col-xs1">
                        <button name="create_flag" value="" class="layui-btn layui-btn-xs layui-btn-radius">原创</button>
                    </div>
                </div>
            </div>

            <!--博客内容-->
            <div class="layui-card-body js-toc-content">
                <!--博客标签信息-->
                <div id="blog_tagList" class="layui-row layui-col-space4">
                    <div class="layui-col-md2 layui-col-xs4" style="text-align: center">
                        <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" name="tag_id" value="1"
                              onclick="window.location.href='/blog/blog_tag.html?id=1'">我草123</button>
                    </div>
                </div>
                <!--博客的content-->
                <div id="wrapper" class="typo typo-selection">

                    <div id="content-markdown-view" style="width: 95%">
                        <!-- Server-side output Markdown text -->
                        <textarea style="display:none;">### Hello world!</textarea>
                    </div>

                </div>
            </div>
            <!--赞赏按钮-->
            <div class="layui-row" style="text-align: center;padding: 5em 1em">
                <button id="appreciate_btn" class="layui-btn layui-btn-sm layui-btn-radius">赞赏</button>
            </div>
            <!--赞赏的二维码-->
            <div id="appreciate_div" class="layui-row layui-hide" style="padding: 2em">
                <div class="layui-col-md2 layui-col-md-offset4 layui-col-xs6" style="text-align: right">
                    <img src="/blog/img/收款码-支付宝.jpg" alt="" style="width: 10em;height: 10em">
                </div>
                <div class="layui-col-md2 layui-col-xs6" style="text-align: left">
                    <img src="/blog/img/收款码-微信.png" alt="" style="width: 10em;height: 10em">
                </div>
            </div>


        </div>

        <!--评论区域-->
        <div class="layui-card my_opacity" id="comment">
            <!--标题-->
            <div class="layui-card-header">
                <h2 style="text-align: center">评论</h2>
            </div>
            <!--评论区-->
            <div class="layui-card-body">
                <!--评论列表-->
                <div id="comment_list">
                    <!--评论1-->
                    <div class="layui-row layui-col-space4">
                        <div class="layui-col-md2 layui-col-xs4">
                            <img class="layui-nav-img"
                                 src="https://picsum.photos/100/100?image=140"
                                 alt="">
                            <span class="layui-font-blue">人生梦一场</span></div>
                        <div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>2021-08-03
                        </div>
                    </div>
                    <div class="layui-row" style="padding: 0 2em 1em 2em">
                        <p>With the development of social society, more and more college students are getgetting into
                            society to find a job. At the same time, the jobs are getting less as a result of the
                            development of AI, which means the social society wants more creative people instead of
                            skillful
                            people.</p>
                    </div>
                </div>

                <!--评论分页按钮区域-->
                <div class="layui-row" id="comment_page" style="text-align: center"></div>

                <!--增加评论区域-->
                <form class="layui-form" style="padding: 2em 0" action="#">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">
                            <i class="layui-icon layui-icon-reply-fill"></i>评论区
                        </label>
                        <textarea name="comment_content" class="layui-textarea" required lay-verify="required"
                                  placeholder="请输入评论内容..."></textarea>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center">
                            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-submit lay-filter="form_submit">
                                发表
                            </button>
                            <button type="reset" id="reset_btn"
                                    class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius">重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>


    </div>

    <!--目录-->
    <div class="layui-card"
         style="position: fixed;z-index: 1000;margin-left: -20px;right: 10px;bottom: 10px;width: auto">
        <div class="layui-card-header">
            <a href="#"><h3 style="text-align: center">目录</h3></a>
        </div>
        <div class="layui-card-body">
            <ol class="js-toc">

            </ol>
            <ol>
                <a href="#comment">评论</a>
            </ol>
        </div>
    </div>


    <!--底部footer-->
    <footer class="my_layui-footer">
        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3 layui-col-sm3">
                    <img src="/blog/img/二维码.png" alt="图片"
                         style="width: 100px; height: 100px; margin-right: 10px; border-radius: 10%;">
                </div>
                <div class="layui-col-md3 layui-col-sm3">
                    <h4>最新博客</h4>
                    <ul class="layui-nav layui-nav-tree layui-bg-gray">
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>博客1</li>
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>博客2</li>
                    </ul>
                </div>
                <div class="layui-col-md3 layui-col-sm3">
                    <h4>联系我</h4>
                    <ul class="layui-nav layui-nav-tree layui-bg-gray">
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>767719297@qq.com</li>
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-cellphone"></i>15082687458</li>
                    </ul>
                </div>
                <div class="layui-col-md3 layui-col-sm3">
                    <h4>先留着</h4>
                    <ul class="layui-nav layui-nav-tree layui-bg-gray">
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>767719297@qq.com</li>
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-cellphone"></i>15082687458</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
</html>

<style>
    body {
        background-image: url("https://z3.ax1x.com/2021/08/31/haPSAA.png");
        background-repeat: repeat;
        background-size: 100% auto;
    }

    .my_layui-footer {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        height: auto;
        line-height: 44px;
        padding: 0 15px;
        /*box-shadow: -1px 0 4px rgb(0 0 0 12%);*/
        background-color: #FAFAFA
    }

</style>


<!--layUI的js-->
<script src="/layui/layui.js"></script>
<!--jQuery-->
<script src="/jquery-3.6.0.min.js"></script>
<!--引入自己的js-->
<script src="/blog/js/detail.js"></script>
<script src="/blog/js/common.js"></script>
<script src="/blog/js/background.js"></script>
<!--editor 的预览js-->
<script src="/lib/editormd/editormd.min.js"></script>
<script src="/lib/editormd/lib/marked.min.js"></script>
<script src="/lib/editormd/lib/prettify.min.js"></script>
<!--引入看板娘-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="/lib/live2d/autoload.js"></script>